<template>
	<view class="ur-movable" @touchmove="touchmove" @click="emitMovable" :style="{left:left,top:top,width,height}">
		<slot>
			<view class="movableFlex">
				<uni-icons :type="type" size="20" color="#fff"></uni-icons>
				<view class="">{{value}}</view>
			</view>
		</slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				offset: 24,
				left: '', // left
				top: this.topTop, //  top
			}
		},
		props: {
			// 宽度
			width: {
				type: String,
				default: '90rpx'
			},
			// 高度度
			height: {
				type: String,
				default: '90rpx'
			},
			// 是否可以滑动
			movable: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'plusempty'
			},
			value: {
				type: String,
				default: ''
			},
			topTop: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 按下按钮的时候
			touchstart(event) {
				if (this.movable) return
				var touch = event.touches[0] || event.changedTouches[0]
				this.left = `${touch.clientX-this.offset}px`
				this.top = `${touch.clientY-this.offset}px`
			},
			// 滑动的时候
			touchmove(event, ins) { // 获取元素被拖动后的位置
				if (this.movable) return
				var touch = event.touches[0] || event.changedTouches[0]
				var systemMain = getApp().globalData.systemMain
				if (touch.clientX > (systemMain.screenWidth - this.offset)) touch.clientX = systemMain.screenWidth
				if (touch.clientY > (systemMain.screenHeight - this.offset)) touch.clientY = systemMain.screenHeight
				if (touch.clientX < 0) touch.clientX = 0
				if (touch.clientY < 0) touch.clientY = 0
				this.left = `${touch.clientX-this.offset}px`
				this.top = `${touch.clientY-this.offset}px`
			},
			// 点击事件
			emitMovable() {
				this.$emit('emitMovable')
			}
		}
	}
</script>

<style lang="scss">
	.ur-movable {
		position: fixed;
		z-index: 99;
		text-align: center;
		border-radius: 50%;
		box-shadow: 0px 0px 5px 0px rgba(#333, .8);
		background-color: brown;
		bottom: 20%;
		right: 20px;
		display: grid;
	}

	.movableFlex {
		margin: auto;
		font-size: 11px;
	}
</style>